<template>
	<view class="page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<view class="logo">
					<image src="https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D1.jpg"
						class="logo-img" mode="aspectFit"></image>
					<text class="logo-text">梁河葫芦丝</text>
				</view>
			</view>
		</view>

		<!-- 轮播图/Hero区域 -->
		<view class="hero">
			<swiper class="hero-swiper" indicator-dots="true" autoplay="true" interval="4000" duration="500"
				indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ffffff">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image :src="item.image" class="hero-bg" mode="aspectFill"></image>
					<view class="hero-overlay"></view>
				</swiper-item>
			</swiper>
			<view class="hero-content">
				<view class="hero-badge">
					<text class="badge-text">国家级非遗</text>
				</view>
				<text class="hero-title">梁河葫芦丝</text>
				<text class="hero-subtitle">"丝韵之声，声声不息"</text>
				<text class="hero-description">流淌在时光里的天籁之脉</text>
				<view class="hero-buttons">
					<button class="btn primary gradient" @click="navigateTo('/pages/culture/culture')">
						<text class="btn-icon">🏛️</text>
						<text class="btn-text">探索文化</text>
					</button>
					<button class="btn secondary" @click="navigateTo('/pages/music/music')">
						<text class="btn-icon">🎵</text>
						<text class="btn-text">聆听音乐</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 非遗文化传承介绍 -->
		<view class="section features-section">
			<!-- 标题区域 -->
			<view class="section-header">
				<text class="section-badge">传承千年</text>
				<text class="section-title">非遗文化传承</text>
				<text class="section-subtitle">深厚历史底蕴，代代相传的技艺精髓</text>
			</view>

			<!-- 内容网格 -->
			<view class="intro-grid">
				<view v-for="(item, index) in introItems" :key="index" class="intro-item fade-in"
					:style="{ 'animation-delay': index * 0.2 + 's' }">
					<!-- 图标区域 -->
					<view class="intro-icon">
						<image :src="item.image" class="intro-img" mode="aspectFill" />
						<view class="intro-overlay">
							<text class="intro-number">{{ index + 1 }}</text>
						</view>
					</view>

					<!-- 文字内容 -->
					<view class="intro-content">
						<text class="intro-title">{{ item.title }}</text>
						<text class="intro-desc">{{ item.description }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 文化脉络预览 -->
		<view class="section culture-preview">
			<!-- 文化英雄区 -->
			<view class="culture-hero">
				<!-- 背景图 -->
				<image src="https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D4.jpg"
					class="culture-bg" mode="aspectFill" />

				<!-- 遮罩层 -->
				<view class="culture-overlay"></view>

				<!-- 内容层 -->
				<view class="culture-content">
					<view class="culture-badge">
						<text class="badge-text">远古溯源</text>
					</view>
					<text class="culture-title">文化脉络</text>
					<text class="culture-subtitle">跨越千年的文化密码</text>
					<text class="culture-desc">
						在云南西部的梁河县，葫芦丝诞生于先民对自然的敬畏与巧用。当先民们偶然发现葫芦与竹子的组合能发出悦耳声响时，最原始的葫芦丝便萌芽了...
					</text>

					<!-- 按钮 -->
					<button class="btn primary glass" @click="navigateTo('/pages/culture/culture')">
						<text class="btn-text">探索文化脉络</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 传承人风采 -->
		<view class="section inheritors-preview">
			<!-- 标题区 -->
			<view class="section-header">
				<text class="section-badge">匠心传承</text>
				<text class="section-title">传承人风采</text>
				<text class="section-subtitle">技艺精湛，传承有序的大师风范</text>
			</view>

			<!-- 横向滚动列表 -->
			<scroll-view class="inheritors-scroll" :scroll-x="true" :show-scrollbar="false"
				:scroll-with-animation="true">
				<view class="inheritors-list">
					<!-- 传承人卡片 -->
					<view v-for="(item, index) in inheritors" :key="index" class="inheritor-card slide-up"
						:style="{ 'animation-delay': index * 0.1 + 's' }">
						<!-- 头像区域 -->
						<view class="inheritor-avatar">
							<image :src="item.image" class="inheritor-img" mode="aspectFill" />
							<view class="inheritor-badge">
								<text class="badge-icon">🏆</text>
							</view>
						</view>

						<!-- 信息区域 -->
						<view class="inheritor-info">
							<text class="inheritor-name">{{ item.name }}</text>
							<text class="inheritor-title">{{ item.title }}</text>
							<text class="inheritor-desc">{{ item.description }}</text>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 查看更多按钮 -->
			<view class="text-center mt-30">
				<button class="btn primary outline" @click="navigateTo('/pages/inheritors/inheritors')">
					<text class="btn-text">查看更多传承人</text>
					<text class="btn-arrow">→</text>
				</button>
			</view>
		</view>

		<!-- 音乐欣赏预览 -->
		<view class="section music-preview">
			<!-- 标题区域 -->
			<view class="section-header">
				<text class="section-badge">天籁之音</text>
				<text class="section-title">音乐欣赏</text>
				<text class="section-subtitle">每一首曲目都承载着深厚的文化内涵</text>
			</view>

			<!-- 音乐展示区 -->
			<view class="music-showcase">
				<!-- 音乐卡片列表 -->
				<view class="music-cards">
					<view v-for="(item, index) in featuredMusic" :key="index" class="music-card featured">
						<!-- 音乐封面 -->
						<view class="music-cover">
							<image :src="item.cover" class="music-img" mode="aspectFill" />
							<!-- 播放按钮（可点击） -->
							<view class="play-btn" @click="playMusic(item.id)">
								<text class="play-icon">▶️</text>
							</view>
						</view>

						<!-- 音乐信息 -->
						<view class="music-info">
							<text class="music-name">{{ item.name }}</text>
							<text class="music-artist">{{ item.artist }}</text>
						</view>
					</view>
				</view>

				<!-- 数据统计 -->
				<view class="music-stats">
					<view class="stat-item">
						<text class="stat-number">50+</text>
						<text class="stat-label">经典曲目</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">1000+</text>
						<text class="stat-label">欣赏人数</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">24小时</text>
						<text class="stat-label">在线聆听</text>
					</view>
				</view>

				<!-- 查看更多按钮 -->
				<button class="btn primary gradient wide" @click="navigateTo('/pages/music/music')">
					<text class="btn-icon">🎧</text>
					<text class="btn-text">聆听更多音乐</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPlaying: null,
				isPlaying: false,
				currentAudio: null,
				// 轮播图数据
				bannerList: [{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D1.jpg',
						title: '梁河葫芦丝'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D1.jpg',
						title: '非遗文化'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D5.jpg',
						title: '精湛技艺'
					}
				],
				// 非遗文化传承介绍
				introItems: [{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D1.jpg',
						title: '深厚历史',
						description: '跨越千年的文化密码，从新石器时代到现代的演变历程，见证了梁河葫芦丝的深厚底蕴'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D2.png',
						title: '名师传承',
						description: '以哏德全、龚全国为代表的葫芦丝大师，传承古老技艺，培育新一代传人'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D3.jpg',
						title: '精湛工艺',
						description: '从选材到调音，每一道工序都蕴含着匠人智慧，让天籁之音完美呈现'
					}
				],
				// 精选音乐
				featuredMusic: [{
						id: 1,
						name: '月光下的凤尾竹',
						artist: '哏德全',
						cover: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D5.jpg',
						audioSrc: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E3%80%8A%E6%9C%88%E5%85%89%E4%B8%8B%E7%9A%84%E5%87%A4%E5%B0%BE%E7%AB%B9%E3%80%8B%E9%9F%B3%E9%A2%91.mp3',
					},
					{
						id: 2,
						name: '竹林深处',
						artist: '龚全国',
						cover: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D6.png',
						audioSrc: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E3%80%8A%E7%91%B6%E6%97%8F%E8%88%9E%E6%9B%B2%E3%80%8B%E9%9F%B3%E9%A2%91.mp3',
					}
				],
				// 传承人信息（精简版）
				inheritors: [{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E5%93%8F%E5%BE%B7%E5%85%A8%E7%85%A7%E7%89%87.jpg',
						name: '哏德全',
						title: '国家级传承人',
						description: '被誉为"葫芦丝王子"，代表作品《月光下的凤尾竹》深受喜爱'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E9%BE%9A%E5%85%A8%E5%9B%BD.webp',
						name: '龚全国',
						title: '葫芦丝开拓者',
						description: '1979年以《竹林深处》让葫芦丝从云南走向全国'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E5%93%8F%E4%BB%8E%E5%9B%BD.jpg',
						name: '哏从国',
						title: '新一代传承人',
						description: '德宏葫芦丝演奏非遗传承人，积极推广葫芦丝文化'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E5%80%AA%E5%BC%80%E5%AE%8F.jpg',
						name: '倪开宏',
						title: '州级传承人',
						description: '在传承传统技艺的基础上，积极创新演奏技法'
					}
				],
				statusBarHeight: 0,


			}
		},
		onLoad() {
			// 获取系统状态栏高度
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 0
		},
		onHide() {
			// 页面销毁时清理音频资源
			if (this.currentAudio) {
				this.currentAudio.destroy()
				this.currentAudio = null
			}
		},
		methods: {
			navigateTo(url) {
				uni.switchTab({
					url: url
				})
			},
			playMusic(e) {

				const musicId = e
				const music = this.featuredMusic.find(item => item.id === musicId)

				if (!music) {
					uni.showToast({
						title: '歌曲不存在',
						icon: 'none',
						duration: 1500
					})
					return
				}
				let audio = uni.createInnerAudioContext()
				audio.src = music.audioSrc

				audio.onError((err) => {
					console.error('音频播放错误:', err)
					uni.showToast({
						title: '音频播放失败',
						icon: 'none'
					})
				})
				audio.onPlay(() => {
					console.log('开始播放');
				});
				audio.onPause(() => {
					console.log('暂停播放')
				})
				audio.onEnded(() => {
					this.isPlaying = false
					this.currentPlaying = -1
				})
				console.log(this.currentPlaying === musicId && this.isPlaying)
				if (this.currentPlaying === musicId && this.isPlaying) {
					// 正在播放同一首，点击则暂停
					this.isPlaying = false
					uni.showToast({
						title: '暂停播放',
						icon: 'none',
						duration: 1000
					})
					this.currentAudio.pause()
				} else {
					if (this.currentAudio) {
						this.currentAudio.destroy()
					}
					// 播放新歌曲
					this.currentPlaying = musicId
					this.isPlaying = true
					uni.showToast({
						title: `播放《${music.name}》`,
						icon: 'none',
						duration: 1500
					})
					this.currentAudio = audio
					audio.play()
				}
			},
		}
	}
</script>

<style lang="scss">
	/* 全局变量 */

	.page {
		background: linear-gradient(180deg, $uni-light-color 0%, #ffffff 100%);
		min-height: 100vh;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 245, 240, 0.95) 100%);
		backdrop-filter: blur(20px);
		border-bottom: 1rpx solid rgba(140, 98, 57, 0.1);
		z-index: 1000;
	}

	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		padding: 0 30rpx;
		max-width: 750rpx;
		margin: 0 auto;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo-img {
		width: 50rpx;
		height: 50rpx;
		margin-right: 16rpx;
		border-radius: 50%;
	}

	.logo-text {
		font-size: 32rpx;
		font-weight: bold;
		background: linear-gradient(135deg, $uni-primary-color 0%, $uni-secondary-color 100%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	/* Hero区域 - 全新设计 */
	.hero {
		position: relative;
		height: 100vh;
		min-height: 600rpx;
		max-height: 800rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hero-swiper {
		width: 100%;
		height: 100%;
	}

	.hero-bg {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hero-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(44, 36, 24, 0.6) 0%, rgba(58, 117, 99, 0.4) 100%);
	}

	.hero-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: white;
		z-index: 2;
		width: 90%;
		max-width: 500rpx;
		padding: 0 $uni-space-lg;
	}

	.hero-badge {
		display: inline-block;
		background: $uni-glass-bg;
		backdrop-filter: blur(10px);
		border: 1rpx solid $uni-glass-border;
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		margin-bottom: 30rpx;
	}

	.badge-text {
		font-size: 22rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.9);
	}

	.hero-title {
		font-size: 64rpx;
		font-weight: 900;
		margin-bottom: 20rpx;
		display: block;
		text-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
		background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	.hero-subtitle {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 15rpx;
		display: block;
		text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
	}

	.hero-description {
		font-size: 26rpx;
		opacity: 0.9;
		margin-bottom: 50rpx;
		line-height: 1.6;
		text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
	}

	.hero-buttons {
		display: flex;
		flex-direction: column;
		gap: $uni-space-md;
		align-items: center;
		width: 100%;
	}

	@media (min-width: 480px) {
		.hero-buttons {
			flex-direction: row;
			justify-content: center;
			gap: $uni-space-lg;
		}
	}

	/* 现代化按钮样式 */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx 40rpx;
		border-radius: 50rpx;
		font-size: 26rpx;
		font-weight: 600;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		border: none;
		position: relative;
		overflow: hidden;
		min-width: 180rpx;
	}

	.btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s;
	}

	.btn:active::before {
		left: 100%;
	}

	.btn.primary {
		background: linear-gradient(135deg, $uni-primary-color 0%, $uni-accent-color 100%);
		color: white;
		box-shadow: 0 8rpx 32rpx rgba(140, 98, 57, 0.3);
	}

	.btn.primary.gradient {
		background: linear-gradient(135deg, $uni-primary-color 0%, $uni-secondary-color 50%, $uni-accent-color 100%);
		box-shadow: 0 12rpx 40rpx rgba(140, 98, 57, 0.4);
	}

	.btn.primary.glass {
		background: $uni-glass-bg;
		backdrop-filter: blur(20px);
		border: 1rpx solid $uni-glass-border;
		color: white;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
	}

	.btn.primary.outline {
		background: transparent;
		border: 2rpx solid $uni-primary-color;
		color: $uni-primary-color;
	}

	.btn.secondary {
		background: $uni-glass-bg;
		backdrop-filter: blur(10px);
		border: 1rpx solid $uni-glass-border;
		color: white;
	}

	.btn.wide {
		width: 100%;
		max-width: 400rpx;
	}

	.btn:active {
		transform: translateY(2rpx) scale(0.98);
	}

	.btn-icon {
		margin-right: 10rpx;
		font-size: 24rpx;
	}

	.btn-text {
		flex: 1;
	}

	.btn-arrow {
		margin-left: 10rpx;
		font-size: 20rpx;
		transition: transform 0.3s ease;
	}

	.btn:active .btn-arrow {
		transform: translateX(4rpx);
	}

	/* Section样式升级 */
	.section {
		padding: 80rpx 30rpx;
		max-width: 750rpx;
		margin: 0 auto;
	}

	.section-header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.section-badge {
		display: inline-block;
		background: linear-gradient(135deg, $uni-primary-color 0%, $uni-accent-color 100%);
		color: white;
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		font-size: 22rpx;
		font-weight: 500;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 48rpx;
		font-weight: 900;
		background: linear-gradient(135deg, $uni-primary-color 0%, $uni-secondary-color 100%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		margin-bottom: 20rpx;
		line-height: 1.2;
	}

	.section-subtitle {
		font-size: 28rpx;
		color: $uni-text-color;
		opacity: 0.8;
		line-height: 1.5;
	}

	/* 特色功能区域 */
	.features-section {
		background: $uni-bg-primary;
		border-radius: $uni-radius-xl;
		margin: 0 $uni-space-md;
		box-shadow: $uni-shadow-lg;
		padding: $uni-space-2xl $uni-space-lg;
	}

	.intro-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: $uni-space-xl;
		max-width: 800rpx;
		margin: 0 auto;
	}

	@media (min-width: 640rpx) {
		.intro-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 900rpx) {
		.intro-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.intro-item {
		text-align: center;
		padding: $uni-space-md;
	}

	.intro-item.fade-in {
		animation: fadeInUp 0.8s ease forwards;
	}

	@keyframes fadeInUp {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.intro-icon {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		margin: 0 auto $uni-space-lg;
		border-radius: $uni-radius-lg;
		overflow: hidden;
		box-shadow: $uni-shadow-md;
	}

	.intro-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.5s ease;
	}

	.intro-item:active .intro-img {
		transform: scale(1.1);
	}

	.intro-overlay {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 40rpx;
		height: 40rpx;
		background: linear-gradient(135deg, $uni-primary-color 0%, $uni-accent-color 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.intro-number {
		color: white;
		font-size: 20rpx;
		font-weight: bold;
	}

	.intro-content {
		padding: 0;
	}

	.intro-title {
		font-size: $uni-text-lg;
		font-weight: bold;
		color: $uni-primary-color;
		margin-bottom: $uni-space-sm;
		display: block;
	}

	.intro-desc {
		font-size: $uni-text-sm;
		color: $uni-text-secondary;
		line-height: 1.6;
		text-align: justify;
	}

	/* 传承人风采区域 */
	.inheritors-preview {
		background: linear-gradient(135deg, $uni-secondary-color 0%, $uni-primary-color 100%);
		border-radius: 40rpx;
		margin: 0 20rpx;
		color: white;
		position: relative;
		overflow: hidden;
	}

	.inheritors-preview::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 200rpx;
		height: 200rpx;
		background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
		border-radius: 50%;
		transform: translate(50%, -50%);
	}

	.inheritors-preview .section-title,
	.inheritors-preview .section-subtitle {
		color: white;
	}

	.inheritors-scroll {
		margin: 0 -30rpx;
		padding: 0 30rpx;
	}

	.inheritors-list {
		display: flex;
		gap: 24rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
	}

	.inheritor-card {
		flex-shrink: 0;
		width: 260rpx;
		background: $uni-glass-bg;
		backdrop-filter: blur(20px);
		border: 1rpx solid $uni-glass-border;
		border-radius: 24rpx;
		overflow: hidden;
		transform: translateY(30rpx);
		opacity: 0;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	}

	.inheritor-card.slide-up {
		animation: slideUp 0.6s ease forwards;
	}

	@keyframes slideUp {
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.inheritor-avatar {
		position: relative;
		height: 180rpx;
		overflow: hidden;
	}

	.inheritor-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.inheritor-badge {
		position: absolute;
		top: 15rpx;
		left: 15rpx;
		width: 40rpx;
		height: 40rpx;
		background: linear-gradient(135deg, $uni-accent-color 0%, #f4d03f 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.badge-icon {
		font-size: 20rpx;
	}

	.inheritor-info {
		padding: 20rpx;
	}

	.inheritor-name {
		font-size: 28rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 8rpx;
		display: block;
	}

	.inheritor-title {
		font-size: 22rpx;
		color: $uni-accent-color;
		margin-bottom: 15rpx;
		display: block;
	}

	.inheritor-desc {
		font-size: 22rpx;
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.8);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* 文化预览区域 */
	.culture-preview {
		margin: 0 20rpx;
		border-radius: 40rpx;
		overflow: hidden;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
	}

	.culture-hero {
		position: relative;
		height: 450rpx;
		overflow: hidden;
	}

	.culture-bg {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.culture-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(58, 117, 99, 0.5) 100%);
	}

	.culture-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: white;
		width: 85%;
		max-width: 450rpx;
		padding: 0 20rpx;
	}

	.culture-badge {
		display: inline-block;
		background: $uni-glass-bg;
		backdrop-filter: blur(10px);
		border: 1rpx solid $uni-glass-border;
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		margin-bottom: 20rpx;
	}

	.culture-title {
		font-size: 48rpx;
		font-weight: 900;
		margin-bottom: 15rpx;
		display: block;
		text-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
	}

	.culture-subtitle {
		font-size: 28rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
		display: block;
		opacity: 0.9;
	}

	.culture-desc {
		font-size: 24rpx;
		line-height: 1.6;
		margin-bottom: 40rpx;
		opacity: 0.8;
	}

	/* 音乐预览区域 */
	.music-preview {
		background: linear-gradient(135deg, #ffffff 0%, $uni-light-color 100%);
		border-radius: 40rpx;
		margin: 0 20rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.05);
	}

	.music-showcase {
		text-align: center;
	}

	.music-cards {
		display: flex;
		justify-content: center;
		gap: 24rpx;
		margin-bottom: 40rpx;
		padding: 0 20rpx;
	}

	.music-card {
		width: 140rpx;
		text-align: center;
		flex-shrink: 0;
	}

	.music-cover {
		position: relative;
		width: 110rpx;
		height: 110rpx;
		margin: 0 auto 12rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.music-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.play-btn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 40rpx;
		height: 40rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10px);
	}

	.play-icon {
		font-size: 16rpx;
		color: $uni-primary-color;
	}

	.music-name {
		font-size: 24rpx;
		font-weight: 600;
		color: $uni-primary-color;
		margin-bottom: 5rpx;
		display: block;
	}

	.music-artist {
		font-size: 20rpx;
		color: $uni-text-color;
		opacity: 0.7;
	}

	.music-stats {
		display: flex;
		justify-content: space-around;
		margin: 0 20rpx 40rpx;
		padding: 24rpx 16rpx;
		background: $uni-light-color;
		border-radius: 24rpx;
	}

	.stat-item {
		text-align: center;
	}

	.stat-number {
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-primary-color;
		display: block;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 22rpx;
		color: $uni-text-color;
		opacity: 0.7;
	}

	/* 通用工具类 */
	.text-center {
		text-align: center;
	}

	.mt-30 {
		margin-top: 60rpx;
	}

	/* 动画优化 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.fade-in {
		animation: fadeIn 0.6s ease-in-out;
	}

	.slide-up {
		animation: slideUp 0.5s ease-out;
	}
</style>